<template>
  <div id="app">
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/indicator/indicatorConfig' }">指标提取</el-breadcrumb-item>
        <el-breadcrumb-item>{{fileName}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="title">提取结果展示</div>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="title-bar">{{fileName}}</div>
        <div class="scrollable-shadow-box">
          <el-scrollbar style="height: 410px;">
            <!-- 这里放置你的文档内容 -->
            <div v-html="resData.content"></div>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="title-bar">指标对应结果</div>
        <div class="shadow-box">
          <el-table :data="result" v-if="tableVisible" border>
            <el-table-column
              prop="key"
              align="center"
              label="指标"
              width="100">
            </el-table-column>
            <el-table-column
              prop="value"
              align="center"
              label="结果">
            </el-table-column>
          </el-table>
        </div>
        <!-- 错误提示 -->
        <div v-if="errorVisible" class="error-container">
          <div class="error-icon"></div>
          <div class="error-message">提取有误，可尝试重新提取。</div>
          <el-button size="mini" type="danger"  @click="renewAction()">重新执行</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  // 导入请求方法
  import Pagination from '../../components/Pagination'
  import axios from "axios";
  export default {
    data() {

      return {
        loading: false, //是显示加载
        fileName:this.$route.query.fileName,
        formInline: {
          token: localStorage.getItem('logintoken'),
          tagId: ""
        },
        tableVisible:false ,
        errorVisible:true,
        result:[],
        //任务列表数据
        resData: [],
        Data: [
        // 表格数据
        {
          date: '2024-03-20',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        // ...更多数据
      ],
      }
    },
    // 注册组件
    components: {
      Pagination
    },

    /**
     * 数据发生改变
     */
    watch: {},

    /**
     * 创建完毕
     */
    created() {
      var data1 = localStorage.getItem('userName');
      var data2 = localStorage.getItem('pwd');
      var data3 = localStorage.getItem('userId');
      this.getResData()
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      // 获取数据方法
      getResData() {

        let url = this.$global.javaUrl +"/indicatorConfig/viewResult"
        let config = {
          headers:
            {
              //'Content-Type':'application/json',
              'user' : localStorage.getItem('userId')
            },
          params:
            {
              id:this.$route.query.id,
            }
        }
        axios.get(url, config).then(response=>{
          this.resData = response.data.data
          let parsedData;
          try {
            this.tableVisible =  true;
            this.errorVisible = false;
            parsedData = JSON.parse(this.resData.result);
            this.result= Object.keys(parsedData).map(key => {
              return { key: key, value: parsedData[key] };
            });
          } catch (error) {
            // 处理解析错误
            this.tableVisible =  false;
            this.errorVisible = true;
          }
          console.log("结果:"+this.result)
        })
      },
      // 重新执行
      renewAction() {
        this.logining = true

          let url = this.$global.javaUrl+"/indicatorConfig/renewAction"
          let config = {
            headers:
              {
                //'Content-Type':'application/json',
                'user' : localStorage.getItem('userId')
              },
            params:{'id':this.$route.query.id}

          }

          const loading = this.$loading({
            lock: true,
            text: '任务执行中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });

          axios.get(url,config).then(response=>{
            this.ResponseData = response.data.data.rows

            if (response.data.code == 200) {
              this.$message({
                type: 'success',
                message: "任务执行完成"
              })

              this.getResData()
            } else {
              this.$message({
                type: 'info',
                message: response.msg
              })
            }

          }).finally(() => {
            loading.close()
          })

      },
    }
  }
</script>

<style scoped>
  .breadcrumb{
    margin-bottom: 10px; /* 可选：添加底部外边距，以便与其他元素分隔 */
  }
  .title{
    background-color: #409eff; /* 蓝色背景 */
    color: white; /* 白色文字 */
    padding: 10px; /* 内边距 */
    text-align: center; /* 文字居中 */
  }
  .title-bar {
    background-color: #bd1919; /* 蓝色背景 */
    color: white; /* 白色文字 */
    padding: 10px; /* 内边距 */
    text-align: center; /* 文字居中 */

  }
  .scrollable-shadow-box {
    border: 1px solid #dcdfe6; /* 边框样式 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    padding: 25px;
  }
  .shadow-box {
    border: 1px solid #dcdfe6; /* 边框样式 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }
  .error-container {
    display: flex; /* 使用flex布局将图标和文字放在同一行 */
    justify-content: space-between;
    align-items: center; /* 垂直居中图标和文字 */
    border: 1px solid #ccc; /* 灰色边框 */
    padding: 10px; /* 内边距 */
    margin-bottom: 10px; /* 可选：添加底部外边距，以便与其他元素分隔 */
    background-color: #d9d8d8; /* 灰色背景 */
  }


  .error-icon {
    display: inline-block;
    width: 32px; /* 你可以根据需要调整这个值 */
    height: 32px; /* 你可以根据需要调整这个值 */
    background-color: #FF5733; /* 使用醒目的红色作为背景色 */
    border-radius: 50%; /* 使图标呈圆形 */
    position: relative; /* 为了定位内部的伪元素 */
  }

  .error-icon::before {
    content: ""; /* 伪元素的内容为空 */
    display: block;
    width: 16px; /* 你可以根据需要调整这个值 */
    height: 2px; /* 你可以根据需要调整这个值 */
    background-color: white; /* 使用白色作为线条的颜色 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg); /* 居中并旋转45度 */
  }

  .error-icon::after {
    content: ""; /* 伪元素的内容为空 */
    display: block;
    width: 16px; /* 你可以根据需要调整这个值 */
    height: 2px; /* 你可以根据需要调整这个值 */
    background-color: white; /* 使用白色作为线条的颜色 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg); /* 居中并旋转-45度 */
  }
  /* 可以根据需要调整滚动条的样式 */
  .el-scrollbar__wrap {
    overflow-x: hidden; /* 如果不需要水平滚动条可以隐藏 */
  }
</style>

